import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { aiNotes } from "@/features/home/content"
import { ActivityIcon, ArrowUpRightIcon, MoonIcon } from "@/features/home/icons"
import { cn } from "@/lib/utils"

export function AiFeedbackGrid() {
  return (
    <section className="grid gap-4 lg:grid-cols-[1.05fr,0.95fr]">
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2 text-lg">
            <ActivityIcon className="size-5 text-primary" /> AI 生成守护
          </CardTitle>
          <CardDescription>tailwind-merge + tailwind-variants + lint/content 策略。</CardDescription>
        </CardHeader>
        <CardContent className="space-y-2">
          {aiNotes.map(note => (
            <div key={note.title} className="flex items-start gap-3 rounded-xl border p-3">
              <Badge variant={note.status === "ready" ? "success" : "warning"}>
                {note.status === "ready" ? "ready" : "watch"}
              </Badge>
              <div className="space-y-1">
                <p className="font-medium leading-tight">{note.title}</p>
                <p className="text-sm text-muted-foreground">{note.detail}</p>
              </div>
            </div>
          ))}
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2 text-lg">
            <ActivityIcon className="size-5 text-primary" /> 快速反馈表单
          </CardTitle>
          <CardDescription>用于收集文档/组件反馈，字段样式由 tokens 驱动。</CardDescription>
        </CardHeader>
        <CardContent className="space-y-3">
          <div className="space-y-1">
            <label className="text-sm font-medium" htmlFor="name">称呼</label>
            <Input id="name" placeholder="例如：前端同学" />
          </div>
          <div className="space-y-1">
            <label className="text-sm font-medium" htmlFor="channel">偏好</label>
            <Input id="channel" placeholder="React / Vue / Mini Program" />
          </div>
          <div className="space-y-1">
            <label className="text-sm font-medium" htmlFor="needs">想看到的内容</label>
            <textarea
              id="needs"
              className={cn(
                "min-h-[96px] w-full rounded-lg border border-input bg-background px-3 py-2 text-sm shadow-sm",
                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
              )}
              placeholder="例如：更多 tailwind-variants 配方、AI 提示样例"
            />
          </div>
          <div className="flex items-center gap-2">
            <Button className="gap-2">
              提交反馈
              <ArrowUpRightIcon className="size-4" />
            </Button>
            <Badge variant="outline" tone="ghost" className="gap-1">
              <MoonIcon className="size-3" /> 支持暗色
            </Badge>
          </div>
        </CardContent>
      </Card>
    </section>
  )
}
